<template>
<div id="good-detail">
	<sub-page-header>
		<div slot="center" class="nav-box">
			<ul class="nav nav-border">
				<li @click="page = 1" :class="{active:page == 1}">商品</li>
				<li @click="page = 2" :class="{active:page == 2}">详情</li>
				<li @click="page = 3" :class="{active:page == 3}">评论</li>
			</ul>
		</div>
		<div class="dropdown-box" slot="right">
			<i @click="showDropdown = !showDropdown" class="iconfont icon-diandian"></i>
			<ul v-show="showDropdown" class="dropdown">
				<div class="arrow-up"></div>
				<router-link to="/" tag="li"><i class="iconfont icon-home"></i>首页</router-link>
				<router-link to="/good-categories" tag="li"><i class="iconfont icon-category"></i>分类</router-link>
				<router-link to="/cart" tag="li"><i class="iconfont icon-cart"></i>购物车</router-link>
				<router-link to="/me" tag="li"><i class="iconfont icon-user"></i>我的</router-link>
			</ul>
		</div>
	</sub-page-header>

	<div class="pages">
		<div v-show="page == 1" class="page">
			<el-carousel class="white-box text-center">
				<el-carousel-item v-for="(image, key) in goods.images" key="key">
					<img :src="image" class="carousel-img">
				</el-carousel-item>
			</el-carousel>
			<div class="white-box container-fluid info clearfix">
				<h4>{{goods.title}}</h4>
				<p><span class="text-price">£{{activeSpec.price}}</span> </p>
				<p class="text-assist">
					<small>重量 {{activeSpec.weight}}克 </small>
					<small class="pull-right text-assist">销量 {{goods.solded}} 笔</small>
				</p>
			</div>

			<div class="specs container-fluid white-box">
				<h5 class="text-assist">商品规格</h5>
				<span v-if="specs.length" @click="activeSpec = spec" v-for="spec in specs" :class="'label '+(activeSpec.id == spec.id ? 'label-normal' : 'label-info')">{{spec.title}}</span>
				<p v-else class="text-center">暂无规格</p>
			</div>

			<div v-if="evaluates.length > 0" class="evaluate white-box">
				<h5>相关评价</h5>
				<div class="evaluate bg-white">
					<div class="evaluate-header">
						<img :src="evaluates[0].user.avatar" class="avatar">
						<span>{{evaluates[0].user.nickname}}</span>
						<span class="stars"><i v-for="item in parseInt(evaluates[0].star)" class="iconfont icon-xing active"></i></span>
					</div>
					<div class="evaluate-body">{{evaluates[0].content}}</div>
					<div class="evaluate-footer"><span>{{evaluates[0].create_time}}</span></div>
				</div>
			</div>
			<div v-else class="hot-suggest bg-white">
				<div class="title">
					<i class="iconfont icon-huo"></i>
					热卖推荐
				</div>

				<ul class="goods-list">
					<li @click="$router.push('/goods/detail/'+product.id)" v-for="product in recommends">
						<img :src="product.thumbnail"/>
						<p>{{product.title}}</p>
						<div class="text-left">
							<span class="price">£{{product.price}}</span>
							<i class="iconfont icon-cart add-cart"></i>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div v-show="page == 2" class="page">
			<div class="content container-fluid bg-white" v-html="goods.content"></div>
		</div>
		<div v-show="page == 3" class="page">
			<!-- 没评论 -->
			<div v-if="evaluates.length == 0" class="empty" style="height:500px;">
				<img src="../../assets/empty.png" width="64"/><br>还没有人发布评论~~
			</div>
			<!-- 有评论 -->
			<div v-for="evaluate in evaluates" class="evaluate bg-white" :key="evaluate.id">
				<div class="evaluate-header">
					<img :src="evaluate.user.avatar" class="avatar">
					<span>{{evaluate.user.nickname}}</span>
					<span class="stars"><i v-for="item in parseInt(evaluate.star)" class="iconfont icon-xing active"></i></span>
				</div>
				<div class="evaluate-body">{{evaluate.content}}</div>
				<div class="evaluate-footer"><span>{{evaluate.create_time}}</span></div>
			</div>
		</div>
	</div>

	<div class="footer">
		<div :class="'icon-place favorite'+(favorite ? ' active' : '')" @click="setFavorite">
			<i :class="'iconfont '+( favorite ? 'icon-xing2' : 'icon-xing1')"></i>
			{{favorite ? '已收藏' : '收藏'}}
		</div>
		<router-link class="icon-place" to="/cart" tag="div">
			<el-badge :value="$store.state.carts.length" class="item">
				<i class="iconfont icon-cart"></i>
				购物车
			</el-badge>
		</router-link>
		<div @click="showBuyModal=true;action='buy';" class="button buy pull-right">立即购买</div>
		<div @click="showAddCart" class="button addcart pull-right">加入购物车</div>
	</div>

	<div v-show="showBuyModal" class="buy-modal" @click.self="showBuyModal=false">
		<div class="content">
			<div class="container-fluid">
				<el-row class="section">
					<button @click="showBuyModal=false" type="button" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
					<el-col :span="8">
						<img :src="goods.thumbnail" class="left-img">
					</el-col>
					<el-col :span="16">
						<div class="info">
							<p>{{goods.title}}</p>
							<p><span class="text-red">￥{{activeSpec ? activeSpec.price : goods.price}}</span></p>
						</div>
					</el-col>
				</el-row>
				<div class="row section">
					<div class="col-xs-12 container-fluid">
						<h5>规格</h5>
						<p>
							<span @click="activeSpec = spec" v-for="spec in specs" :class="'label label-border '+(activeSpec.id == spec.id ? ' label-normal' : 'label-info')">{{spec.title}}</span>
						</p>
					</div>
				</div>
				<div class="container-fluid buy-number clearfix">
					<h5 class="pull-left">购买数量</h5>
					<el-input-number :min="1" size="small" v-model="number" class="pull-right"></el-input-number>
				</div>
			</div>
			<button @click="action == 'cart' ? addCart() : buy();" class="btn btn-normal btn-block">确定</button>
		</div>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import api from '~/api/api.js';
import SubPageHeader from '~/components/SubPageHeader.vue';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			page: 1,
			showBuyModal: false, // 显示选择规格开关
			showDropdown: false, // 显示下拉开关
			favorite: false, // 是否收藏
			action: null, // 动作 cart 加入购物车 buy 立即购买
			number: 1, // 购买/加入购物车 数量
			goods: {

			},
			specs: [
			],
			activeSpec: {},
			recommends: [], // 相关推荐
			evaluates: [
			]
		}
	},
	computed : {
		showPrice () {
			if (this.minPrice == 0) {
				return this.maxPrice;
			}
			if (this.minPrice == this.maxPrice) {
				return this.minPrice;
			} else {
				return `${this.minPrice}-${this.maxPrice}`;
			}
		}
	},
	watch : {
		'$route' () {
			this.fetchData();
		}
	},
	created () {
		this.fetchData();
	},
	methods: {
		fetchData () {
			window.scrollTo(0,0);
			let id = this.$route.params.id;
			// 记录访问记录
			let history = window.localStorage.getItem('history');
			if (!history) {
				history = [id];
			} else {
				history = history.split(',');
				if (history.indexOf(id) == -1) {
					history.push(id);
				}
				if (history.length > 20) {
					history.splice(0, history.length-20);
				}
			}
			window.localStorage.setItem('history', history.join(','));
			this.$store.commit('loading', true);

			api.get('/goods/detail/'+id)
			.then(response => {
				this.$store.commit('loading', false);
				this.goods = response.data.goods;
				this.specs = response.data.specs;
				if (this.specs.length > 0)
					this.activeSpec = this.specs[0];
				this.evaluates = response.data.evaluates;
				this.favorite = response.data.favorite;
				this.recommends = response.data.recommends;
			})
			.catch(error => {
				this.$store.commit('loading', false);
				this.$message.error('加载失败');
			});
		},
		setFavorite: function () {
			var vue = this;
			if (this.favorite) {
				api.get('/favorite/remove_product/'+this.goods.id)
				.then(function (response) {
					vue.$message('取消收藏成功');
					vue.favorite = false;
				}).catch(function (error) {
					vue.$message(JSON.parse(error.responseText).error);
				});
			} else {
				api.get('/favorite/add_product/'+this.goods.id)
				.then(function (response) {
					vue.$message('收藏成功');
					vue.favorite = true;
				}).catch(function (error) {
					vue.$message(JSON.parse(error.responseText).error);
				});
			}
		},
		showAddCart () {
			let inCart = 0;
			this.specs.forEach((item) => {
				let carts = this.$store.state.carts;
				for(let index in carts) {
					if (carts[index].item_id == item.id) {
						inCart++;
						break;
					}
				}
			});
			if (inCart < this.specs.length) {
				this.showBuyModal=true;
				this.action='cart';
			} else {
				this.$message('该商品已存在购物车了');
			}

		},
		addCart: function () {
			api.post('/cart/add/'+this.goods.id, {
				item_id: this.activeSpec.id,
				qty: this.number
			}).then(response => {
				this.$message('添加成功');
				this.showBuyModal = false;
				this.$store.dispatch('getCart');
			}).catch(error => {
				this.$message.error(error.response.data.error);
			});
		},
		buy: function () {
			api.post('/order/create/'+this.goods.id, {
				item_id: this.activeSpec.id,
				qty: this.number
			}).then(response => {
				let orderId = response.data.id;
				this.$router.push('/order/pay/'+orderId);
			}).catch(error => {
				this.$message.error(error.response.data.error);
			});
		}
	}
}
</script>

<style scoped>
#good-detail {
	height: 100%;
}
.dropdown-box {
	position: relative;
}
.dropdown {
	left: auto;
	right: -8px;
    min-width: 100px;
    background-color: #000;
    opacity: 0.9;
}

.dropdown .arrow-up {
	position: absolute;
	top: -10px;
	right: 15px;
}

.dropdown li {
	color: #fff;
	text-align: center;
}

.dropdown li .iconfont {
	margin-right: 10px;
}

.nav-box {
	display: inline-block;
}

.nav li{
	height: 47px;
}

.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background-color: #f3f3f3;
}

.footer > div {
	display: inline-block;
}

.footer .iconfont {
	font-size: 25px;
	display: block;
	margin-top: 3px;
}

.footer .icon-place {
	width: 24%;
	text-align: center;
	font-size: 12px;
	height: 50px;
    line-height: 25px;
    float: left;
}
.footer .button {
	height: 50px;
	line-height: 50px;
	color: #fff;
	width: 24%;
	font-size: 12px;
	text-align: center;
}

.footer .button.buy {
	background-color: #b21014;
}

.footer .button.addcart {
	background-color: #ff9800;
}

.info {
	padding: 10px;
}

.page {
	min-height: 500px;
}

.white-box {
	background-color: #fff;
}

.specs {
	margin-top: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.favorite.active {
	color: #FF5722;
}

.buy-number {
	margin-bottom: 20px;
}

.buy-number .pull-right {
	margin-top: 20px;
}

.carousel-img {
	max-height: 350px;
	max-width: 100%;
}

.label {
	min-width: 50px;
	text-align: center;
}

.label-info {
	color: inherit;
}

.del-price {
	margin-left: 10px;
}

.buy-modal button.btn {
	border-radius: inherit;
	height: 50px;
}

.buy-modal .info {
	margin-left: 10px;
}

.buy-modal .close {
	font-size: 28px;
}

.content {
	max-width: 100%;
}

.brand-sale, .hot-suggest {
	margin-top: 10px;
	padding: 10px 0px;
	text-align: center;
}

.brand-sale > .title, .hot-suggest > .title {
	padding-bottom: 10px;
	color: #ce4e4e;
}

.brand-sale > .title .iconfont, .hot-suggest > .title .iconfont {
    border-radius: 50%;
	background-color: #FF5722;
	color: #fff;
}

.brand-list,.goods-list {
	overflow: hidden;
}

.brand-list li,.goods-list li {
	float: left;
	width: 49%;
	border-top: 1px solid #f7f7f7;
}

.goods-list li {
	padding: 10px 0px;
}

.brand-list li {
	height: 155px;
}

.brand-list li:nth-child(even), .goods-list li:nth-child(even) {
	border-left: 5px solid #f7f7f7;
}

.brand-list li img, .goods-list li img {
	height: 150px;
	width: 150px;
}

.goods-list li p {
	max-height: 40px;
	overflow: hidden;
}

.goods-list .price {
	font-size: 18px;
	color: #b21014;
	margin-left: 10px;
}

.goods-list .icon-cart {
	float: right;
	margin-right: 10px;
}
</style>
